<template>
  <div class="resources">
    <div class="desc">
      <div>
        <ep-title :title="moduleTitle"></ep-title>
      </div>
    </div>
    <div class="condition">
      <div>
        <div style="flex: 0 0 auto">
          <ep-search
            v-model="b0102"
            placeholder="输入点位名称搜索"
            enter-button="搜索"
            @search="onSearch"
          ></ep-search>
        </div>
        <ep-button
          style="margin-left: 15px"
          icon="refresh.svg"
          @click="refresh"
        ></ep-button>
        <div class="field">
          <ep-button icon="field.svg" @click="fieldVisible = !fieldVisible">字段展示</ep-button>
          <div class="field-box" v-if="fieldVisible">
            <ul>
              <li v-for="(column, index) in tableColumn" :key="index">
                <vxe-checkbox v-model="column.visible" :key="index" v-if="column.type !== ('radio' || 'checkbox')">{{column.title }}</vxe-checkbox>
              </li>
            </ul>
            <div class="btn">
              <p @click="fieldConfirm">确认</p>
              <p @click="fieldRevert">还原</p>
            </div>
          </div>
        </div>
      </div>
      <div>
        <ep-button style="margin-left: 15px" icon="add.svg" @click="openAdd">新增</ep-button>
        <ep-button
          style="margin-left: 15px"
          icon="export.svg"
          @click="exportFile"
          >
          导出
        </ep-button>
      </div>
    </div>
    <div class="ep-table">
      <zh-table ref="listTable" row-id="userId" :url="tableUrl" :columns="tableColumn" :total.sync="totalConut" :filter-config="{remote: true}" @filter-change="filterChange">
        <template #status_edit="{ row }">
          <zh-input type="switch" :formflag="false" v-model="row.status" @change="onStatusChange"
                    checked-children="启用" un-checked-children="禁用"></zh-input>
        </template>
        <!--<template #filter="{ $panel, column }">-->
        <!--  <input-->
        <!--      type="type"-->
        <!--      v-for="(option, index) in column.filters"-->
        <!--      :key="index"-->
        <!--      v-model="option.value"-->
        <!--      @input="$panel.changeOption($event, true, option)"-->
        <!--  />-->
        <!--</template>-->
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
                    <vxe-button status="primary" @click="operate(row,'query')" v-if="row.c0103 === '0'">查看</vxe-button>
                    <vxe-button status="primary" @click="operate(row, 'edit')" v-else>编辑</vxe-button>
              </span>
          </div>
        </template>
      </zh-table>
      <!--<vxe-table-->
      <!--  border="none"-->
      <!--  stripe-->
      <!--  ref="listTable"-->
      <!--  align="center"-->
      <!--  :height="tableHeight"-->
      <!--  :data="tableData"-->
      <!--  @checkbox-all="selectAllEvent"-->
      <!--  @checkbox-change="selectChangeEvent"-->
      <!--  :filter-config="{remote: true}"-->
      <!--  @filter-change="filterChange"-->
      <!--  :sort-config="{remote: true,multiple: true}"-->
      <!--  @sort-change="sortChange"-->
      <!--&gt;-->
      <!--  <vxe-column type="checkbox" width="60"></vxe-column>-->
      <!--  <vxe-column type="seq" title="序号" width="60"></vxe-column>-->
      <!--  <vxe-column field="b0102" title="点位名称" width="100"></vxe-column>-->
      <!--  <vxe-column field="b0103" title="文物编号" width="80"></vxe-column>-->
      <!--  <vxe-column field="b0104Name" title="古系列类别" width="120"></vxe-column>-->
      <!--  <vxe-column field="b0105Name" title="文保等级" sortable width="150"></vxe-column>-->
      <!--  <vxe-column field="b0106Name" title="时代" sortable width="120"></vxe-column>-->
      <!--  <vxe-column field="b0107" title="县市区" :filters="sqData"-->
      <!--                    :filterMultiple=true width="120"></vxe-column>-->
      <!--  <vxe-column field="b0108" title="街道" :filters="jdDataBuild"-->
      <!--              :filterMultiple=true width="120"></vxe-column>-->
      <!--  <vxe-column field="b0109" title="地址" width="150"></vxe-column>-->
      <!--  <vxe-column field="b0113Name" title="是否核销" :filters="[{label: '是', value: '1'}, {label: '否', value: '0'}]"-->
      <!--              :filterMultiple=true width="100"></vxe-column>-->
      <!--  <vxe-column field="b0114Name" title="是否安全" :filters="[{label: '是', value: '1'}, {label: '否', value: '0'}]"-->
      <!--              :filterMultiple=true width="100"></vxe-column>-->
      <!--  <vxe-column field="b0115Name" title="是否划定保护双线" width="150"></vxe-column>-->
      <!--  <vxe-column field="b0117Name" title="省级文保类别" width="120"></vxe-column>-->
      <!--  <vxe-column field="b0118Name" title="省级文保子类" width="120"></vxe-column>-->
      <!--  <vxe-column field="b0121" title="开放时间" width="150"></vxe-column>-->
      <!--  <vxe-column field="b03Info" title="监控设备" width="150"></vxe-column>-->
      <!--  <vxe-column title="操作" width="160" fixed='right'>-->
      <!--    <template slot-scope="scope">-->
      <!--      <ep-button size="small" type="rank" @click="operate(scope.row,'query')">查看</ep-button>-->
      <!--      <ep-button size="small" type="rank" style="margin-left: 8px;" @click="operate(scope.row,'edit')">编辑</ep-button>-->
      <!--    </template>-->
      <!--  </vxe-column>-->
      <!--</vxe-table>-->
      <!--<vxe-pager-->
      <!--    :current-page="pageInfo.currentPage"-->
      <!--    :page-size="pageInfo.pageSize"-->
      <!--    :total="pageInfo.total"-->
      <!--    :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'FullJump']"-->
      <!--    @page-change="handlePageChange"-->
      <!--&gt;-->
      <!--</vxe-pager>-->
    </div>
    <a-modal
        :title="modalTitle"
        centered
        style="top: 20px;"
        width="80%"
        destroyOnClose
        v-model="visible"
        cancelText="关闭"
        okText="保存"
        @ok="handleForm"
    >
      <pointInfo ref="pointInfo" :b0101="objectInfo.b0101" :saveFlag="saveFlag"/>
    </a-modal>
  </div>
</template>

<script>
import _ from 'lodash'
import {getBatchDict} from "@/services/system/api"
import {getResourceObjectList, getSQAndJD, saveResource, updateResource, deleteResourceList} from '@/services/system/whdngxlApi'
import pointInfo from'@/pages/whdngxl/pointInfo'
import modal from "ant-design-vue/lib/modal";

export default {
  name: "resourcesManager",
  computed: {
    b0102: {
      get(){
        return this.queryParam.b0102
      },
      set(val){
        this.queryParam.b0102 = val
      }
    }
  },
  components: { pointInfo },
  data() {
    return {
      fieldVisible: false,
      columns: [],
      tableData: [],
      tableHeight: 0,
      checkRecords: [],
      // 查询参数
      queryParam: {},
      tableUrl: getResourceObjectList,
      tableColumn: [
        {type: 'checkbox', width: 50, fixed: 'left'},
        {type: 'seq', width: 60, align: 'center', title: '序号', visible: true},
        {field: 'b0102', title: '点位名称', align: 'center', width: 100, visible: true},
        {field: 'b0103', title: '文物编号', align: 'center', width: 150, visible: true},
        {field: 'b0104Name', title: '古系列类别', align: 'center', width: 110, visible: true},
        {field: 'b0105Name', title: '文保等级', align: 'center', width: 150,visible: true},
        {field: 'b0106Name', title: '时代', align: 'center', width: 120, visible: true},
        {field: 'b0107', title: '县市区', align: 'center', width: 100, visible: true, filters: [],},
        {field: 'b0108', title: '街道', align: 'center', width: 150, visible: true, filters: [],},
        {field: 'b0109', title: '地址', align: 'center', width: 150, visible: true},
        {field: 'b0113Name', title: '是否核销', align: 'center', width: 120, visible: true, filters: [{label: '是', value: '是'}, {label: '否', value: '否'}],},
        {field: 'b0114Name', title: '是否安全', align: 'center', width: 120, visible: true, filters: [{label: '是', value: '是'}, {label: '否', value: '否'}],},
        {field: 'b0115Name', title: '是否划定保护双线', align: 'center', width: 150, visible: true},
        {field: 'b0117Name', title: '省级文保类别', align: 'center', width: 120, visible: true},
        {field: 'b0118Name', title: '省级文保子类', align: 'center', width: 120, visible: true},
        {field: 'b0121', title: '开放时间', align: 'center', width: 120, visible: true, sortable: true,},
        {field: 'b03Info', title: '监控设备', align: 'center', width: 150, visible: true},
        {field: 'operate', title: '操作', align: 'center',  minWidth: 150,fixed: 'right', slots: {default: 'operate'} }
      ],
      totalConut: 0,
      pageInfo: {
        total: null,
        currentPage: 1,
        pageSize: 200,
      },
      //数据字典
      dictData: {
        B0105: [],
        B0106: [],
        B0113: [],
        B0114: [],
        C0105: [],
      },
      //标题
      moduleTitle: '',
      selectRuleBuild: {},
      orderRuleBuild: {},
      //查询规则
      selectRule: {
        c0303: {
          data: null,
          values: [],
          fuzzyQuery: false,
          multiple: false,
          targetField: 'c0303',
        },
        b0102: {
          data: null,
          values: [],
          fuzzyQuery: true,
          multiple: false,
          targetField: 'b0102',
        },
        b0105: {
          data: null,
          values: [],
          multiple: true,
          targetField: 'b0105',
        },
        b0106: {
          data: null,
          values: [],
          multiple: true,
          targetField: 'b0106',
        },
        c0105: {
          data: null,
          values: [],
          multiple: true,
          targetField: 'c0105',
        },
        b0113: {
          data: null,
          values: [],
          multiple: true,
          targetField: 'b0113',
        },
        b0114: {
          data: null,
          values: [],
          multiple: true,
          targetField: 'b0114',
        },
        b0107: {
          data: null,
          values: [],
          multiple: true,
          targetField: 'b0122',
        },
        b0108: {
          data: null,
          values: [],
          multiple: true,
          targetField: 'b0108',
        },
        b0113Name: {
          data: null,
          values: [],
          multiple: true,
          targetField: 'b0113',
        },
        b0114Name: {
          data: null,
          values: [],
          multiple: true,
          targetField: 'b0114',
        },
      },
      //排序规则
      orderRule: {
        b0105Name: {
          targetField: 'b0105',
          order: null
        },
        b0106Name: {
          targetField: 'b0106',
          order: null
        },
      },
      //弹出框相关参数
      modalTitle: null,
      visible: false,
      b0101: null,
      saveFlag: false,
      //选中对象
      objectInfo: {
        b0101: null,
        c0101: null
      },
      sqData: [],//市区数据
      jdData: [],//街道数据
      jdDataBuild: [],
    };
  },
  created() {
    //数据字典初始化
    this.$http.post(getBatchDict, {dictFields: 'B0105,B0106,C0105,B0113,B0114'}).then(res => {
      this.dictData = res.result
    })
    if(this.$router.currentRoute.name === 'URResourcesManager'){
      //不可移动文物
      this.moduleTitle = '不可移动文物'
      this.queryParam.c0303 = '1'
    }else if(this.$router.currentRoute.name === 'TreeResourcesManager'){
      //古树古木
      this.moduleTitle = '古树古木'
      this.queryParam.c0303 = '2'
    }else if(this.$router.currentRoute.name === 'RoadResourcesManager'){
      //古道
      this.moduleTitle = '古道'
      this.queryParam.c0303 = '3'
    }
    this.$http.post(getSQAndJD, {}).then(res => {
      this.sqData = res.result.sqData
      this.sqData.forEach(item =>{
        item.label = item.orgName
        item.value = item.orgId
      })
      this.jdData = res.result.jdData
      Object.keys(this.jdData).forEach((key) => {
        this.jdData[key].forEach(e =>{
          e.label = e.orgName
          e.value = e.orgId
        })
      })
      // this.sqData = _.map(res.result.sqData, o => {
      //   return {
      //     label: o.orgName,
      //     value: o.orgName,
      //   }
      // })
      // this.jdData = _.map(res.result.jdData, o => {
      //   return {
      //     label: o.orgName,
      //     value: o.orgId,
      //   }
      // })
      const listTable = this.$refs.listTable
      const columnSq = listTable.getColumnByField('b0107')
      // 修改筛选列表
      listTable.setFilter(columnSq, this.sqData)
      // const columnJd = listTable.getColumnByField('b0108')
      // listTable.setFilter(columnJd, this.jdData)

    })
  },
  mounted() {
    this.findGJResource();
  },
  methods: {
    // 查询古迹资源信息
    findGJResource() {
      const filterVOList = []
      Object.keys(this.queryParam).forEach((key) => {
        const fieldRule = this.selectRuleBuild[key]
        if(fieldRule) {
          if(fieldRule.multiple){
            fieldRule.values = this.queryParam[key]
          }else {
            fieldRule.data = this.queryParam[key]
          }
        }
      })
      Object.keys(this.selectRuleBuild).forEach((key) => {
        if(this.selectRuleBuild[key].data){
          filterVOList.push({property: this.selectRuleBuild[key].targetField, data: this.selectRuleBuild[key].data,fuzzyQuery: this.selectRuleBuild[key].fuzzyQuery})
        }else if(this.selectRuleBuild[key].values.length > 0){
          filterVOList.push({property: this.selectRuleBuild[key].targetField, values: this.selectRuleBuild[key].values})
        }
      })
      const orderVOList = []
      Object.keys(this.orderRuleBuild).forEach((key) => {
        if(this.orderRuleBuild[key].order){
          orderVOList.push({property: this.orderRuleBuild[key].targetField, order: this.orderRuleBuild[key].order})
        }
      })
      this.queryParam.filterVOList = filterVOList;
      console.log(this.queryParam)
      this.$refs.listTable.query(this.queryParam)
    },
    //校核
    check(row){
      this.modalTitle = '校核'
      this.visible = true
      this.b0101 = row.b0101
      this.c0101 = row.c0101
      this.saveFlag = false
    },
    //查看
    queryDetail(row){
      this.modalTitle = '查看'
      this.visible = true
      this.b0101 = row.b0101
      this.saveFlag = true
    },
    //筛选
    filterChange({ column, property, values, datas, filterList, $event }){
      console.log(column)
      console.log(property)
      console.log(values)
      console.log(datas)
      console.log(filterList)
      console.log($event)
      //更改街道筛选字段
      if(property === 'b0107'){
        let code = _.find(this.sqData, {value: values[0]}).orgId
        this.jdDataBuild = this.jdData[code]
        _.forEach(this.jdDataBuild, item => {
          item.label = item.orgName
          item.value = item.orgId
        })
        const column = this.$refs.listTable.getColumnByField('b0108')
        // 修改筛选列表，并默认设置为选中状态
        this.$refs.listTable.setFilter(column, this.jdDataBuild)
      }
      //构建多字段筛选参数
      this.selectRuleBuild = JSON.parse(JSON.stringify(this.selectRule));
      filterList.forEach(item=>{
        const fieldRule = this.selectRuleBuild[item.field]
        if(fieldRule){
          if(fieldRule.multiple){
            fieldRule.values = item.values
          }
        }
      })
      // console.log(this.selectRuleBuild)
      this.findGJResource()
    },
    //排序
    sortChange({ column, property, order, sortBy, sortList, $event }){
      console.log(column)
      console.log(property)
      console.log(order)
      console.log(sortBy)
      console.log(sortList)
      console.log($event)
      this.orderRuleBuild = JSON.parse(JSON.stringify(this.orderRule));
      sortList.forEach(item =>{
        if(this.orderRuleBuild[item.field]){
          this.orderRuleBuild[item.field].order = item.order
        }
      })
      this.findGJResource()
    },
    //表单处理
    handleForm(){
      if(this.modalTitle === '查看'){
        this.visible = false
        return
      }
      this.$refs.pointInfo.saveOrUpdate().then(formData =>{
        console.log(formData)
        formData.c0303 = this.queryParam.c0303
        formData.b0110 = formData.b0111 + ',' + formData.b0112
        if(formData.b0101) {
          //编辑
          this.$http.post(updateResource, formData).then(res => {
            modal.info({title: '成功提示', content: '编辑成功'})
            this.visible = false
            this.findGJResource()
          })
        }else {
          //新增
          this.$http.post(saveResource, formData).then(res => {
            modal.info({title: '成功提示', content: '新增成功'})
            this.visible = false
            this.findGJResource()
          })
        }
      })
    },
    // 搜索
    onSearch() {
      this.findGJResource()
    },
    // 刷新
    refresh() {
      this.selectRuleBuild = JSON.parse(JSON.stringify(this.selectRule));
      this.queryParam.b0102 = null
      this.findGJResource()
    },
    // 字段展示- 筛选确认
    fieldConfirm() {
      this.fieldVisible = false;
      this.$refs.listTable.refreshColumn();
    },
    // 字段展示-还原
    fieldRevert() {
      this.fieldVisible = false;
      this.columns.forEach((el) => {
        el.visible = true;
      });
      this.$refs.listTable.refreshColumn();
    },
    // 新增
    openAdd() {
      this.modalTitle = '新增'
      this.visible = true
      this.objectInfo.b0101 = null
      this.saveFlag = false
    },
    // 导出
    exportFile() {},
    // 选择框
    selectChangeEvent() {
      this.checkRecords = this.$refs.listTable.getCheckboxRecords();
    },
    // 选择框-all
    selectAllEvent() {
      this.checkRecords = this.$refs.listTable.getCheckboxRecords();
    },
    // 操作
    operate(row,type) {
      console.log(row)
      if(type === 'query'){
        this.modalTitle = '查看'
        this.visible = true
        this.objectInfo.b0101 = row.b0101
        this.saveFlag = true
      }else if(type === 'edit'){
        this.modalTitle = '编辑'
        this.visible = true
        this.objectInfo.b0101 = row.b0101
        this.saveFlag = false
      }
    },
    // 分页
    handlePageChange({ currentPage, pageSize }) {
      this.pageInfo.currentPage = currentPage;
      this.pageInfo.pageSize = pageSize;
      this.findGJResource()
    },
    // 表格高度
    getTableHeight() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 371;
      });
    },
  },
  beforeRouteLeave(to, from, next) {
    window.removeEventListener("resize", this.getTableHeight);
    next();
  },
};
</script>
<style lang="less" scoped>
.resources {
  //padding: 15px 20px 0;
  .desc,
  .condition {
    display: flex;
    align-items: center;
    justify-content: space-between;
    //color: #fff;
    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }
    .field {
      flex: 0 0 atuo;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #ffffff;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          //color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
  .desc {
    margin-bottom: 20px;
  }
  .condition {
    margin-bottom: 15px;
  }
  //::v-deep .vxe-checkbox--label {
  //  padding-left: 12px;
  //  color: #fff;
  //}
  //::v-deep .vxe-checkbox--icon {
  //  box-shadow: none !important;
  //}
}
</style>

